<script setup lang="ts">
defineOptions({
  name:'Search'
})
import { getSearchHosnameAPI } from '@/api/home';
import { Search} from '@element-plus/icons-vue'
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter()
let Hostname=ref<string>('')
const getSearchHosnameList=async(keyword:string,callback:any)=>{
  const res=await getSearchHosnameAPI(keyword)
  const querySearch=res.data.map(item=>{
    return {
      value:item.hosname,
      hoscode:item.hoscode
    }
  })
  callback(querySearch)
}
const goDetail=(item:any)=>{
  router.push(`/detail/register?hoscode=${item.hoscode}`)
}

</script>

<template>
  <div class="search">
    <el-autocomplete @select="goDetail"  :fetch-suggestions="getSearchHosnameList" :trigger-on-focus="false" 
     v-model="Hostname"  clearable placeholder="点击输入医院名称">
      <template #prefix>
      <el-icon class="el-input__icon" >
        <search/>
      </el-icon>
    </template>
    <template #suffix>
      <el-button text class="search_btn">搜索</el-button>
    </template>
    </el-autocomplete>
  </div>
</template>

<style lang="scss" scoped>
.search {
  width: 800px;
  height: 60px;
  margin: auto;
  margin-top: 25px;
  ::v-deep(.el-input__wrapper){
    height: 60px;
    .search_btn {
    color: #4490F1;
    font-size: 16px;
    margin-right: 0;
    height: 100%;
  } 
  }
 
}
</style>